<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 头部刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 粘性布局 -->
      <van-sticky>
        <van-row style="background: #ffffff">
          <van-col span="21">
            <van-search
              v-model="value"
              shape="round"
              placeholder="请输入门店名称" />
          </van-col>
          <van-col
            @click="search"
            span="3"
            style="margin-top: 15px; text-align: left; font-size: 24px"
            ><van-icon name="search"
          /></van-col>
        </van-row>
        <!-- 标题 -->
        <van-row style="height: 8px; background-color: #ffffff">
          <van-col span="5"> </van-col>
          <van-col span="1"></van-col>
          <van-col span="9"></van-col>
          <van-col span="1"></van-col>
          <van-col span="4"></van-col>
          <van-col span="4"></van-col>
        </van-row>
      </van-sticky>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images">
          <img
            :src="image"
            style="height: 195px; width: 100%; border-radius: 7px" />
        </van-swipe-item>
      </van-swipe>
      <!-- 中间的空白部分 -->
      <van-row style="height: 8px; background-color: #ffffff">
        <van-col span="5"> </van-col>
        <van-col span="1"></van-col>
        <van-col span="9"></van-col>
        <van-col span="1"></van-col>
        <van-col span="4"></van-col>
        <van-col span="4"></van-col>
      </van-row>

      <van-row>
        <van-col span="9">
          <van-cell
            is-link
            readonly
            clickable
            :value="valueArea"
            @click="bindShow"></van-cell>
          <!--选择省市区-->
          <van-popup
            v-model="showArea"
            position="bottom"
            :style="{ height: '40%' }">
            <van-area
              :area-list="areaList"
              cancel-button-text="重置"
              title="请选择地区"
              @confirm="onAreaConfirm"
              @cancel="bindCancel"
              :columns-num="2" />
            <!-- :columns-num 3-省市区，2-省市，1-省 -->
          </van-popup>
        </van-col>
        <van-col span="10">
          <!-- 排序框 -->
          <van-cell
            is-link
            readonly
            clickable
            :value="valueSort"
            @click="bindSort" />

          <!--选择排序顺序-->
          <van-popup
            v-model="showSort"
            :lock-scroll="true"
            position="bottom"
            :style="{ height: '40%' }">
            <van-area
              :area-list="SortList"
              title="门店排列顺序"
              @confirm="onSortConfirm"
              @cancel="SortCancel"
              :columns-num="1" /></van-popup
        ></van-col>
        <van-col span="5"></van-col>
      </van-row>

      <!-- 附近门店块级别元素 -->
      <van-card
        :thumb="store.storeimage"
        style="text-align: left"
        v-for="(store, index) in stores" :key="index" @click="jumpId('information', store.storeId)">
        <template #tags>
          <!-- 门店名称 -->
          <van-cell class="storeName">{{ store.storeName }}</van-cell>

          <!-- 门店星级 -->
          <div class="interval">
            <van-rate
              color="rgb(255, 167, 56)"
              v-model="store.country"
              size="20px"
              readonly />
            <!-- 门店距离 -->
            <span class="distance">{{ store.jvli }}km</span>
          </div>

          <div class="interval">
            <van-tag class="min1" type="medium" size="large"
              >工位:&nbsp;&nbsp;{{ store.countA }}</van-tag
            >
            &nbsp;
            <van-tag class="min2" type="medium" size="large"
              >空闲:&nbsp;&nbsp;{{ store.idleNumber }}</van-tag
            >
            &nbsp;
            <van-tag class="min3" type="medium" size="large"
              >使用中:&nbsp;&nbsp;{{ store.countB }}</van-tag
            >
          </div>

          <!-- 门店标签 -->
          <div class="interval">
            <van-tag
              class="keyword"
              v-for="(item, index) in store.storeLabels"
              :key="item.labelId"
              :list="item.labelId"
              >{{ item.labelContent }}</van-tag
            >&nbsp;
          </div>

          <!-- 门店地址 -->
          <van-cell class="address"
            ><van-icon name="location" color="skyblue" />
            {{ store.address }}</van-cell
          >
        </template>
      </van-card>
      <hr />
      <div style="height: 42px"></div>
      <!-- 底部标签 -->
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o" @click="jump('/')"
          >主页</van-tabbar-item
        >
        <van-tabbar-item
          name="search"
          icon="search"
          @click="jump('/')"
          >附近门店</van-tabbar-item
        >
        <van-tabbar-item name="friends" icon="cart-o" @click="jump('/store')"
          >商城</van-tabbar-item
        >
        <van-tabbar-item name="setting" icon="user-o" @click="jump('/myView')"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </van-pull-refresh>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
import axios from "axios";
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式
  data() {
    //定义数据的地方
    return {
      stores: [], //店铺信息
      key: "d1be5f08c6456683633e78f7c28c47df",
      isLoading: false, //刷新参数
      active: "search", //底部标签绑定
      images: [
        //轮播图
        "https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      ],
      // 两个弹出框数据的开始
      value: "", //辅助搜索
      name: "", //搜索时使用
      areaList, //引用地区信息
      showArea: false,
      valueArea: "请选择地区", //地区值
      arrArea: [], //存放地区数组
      city: "",
      proaa: "",
      // 排序属性
      SortList: {
        province_list: {
          1:"请选择排序方式",
          2: "评分最高",
          3: "距离最近",
        },
      },
      //引用排序方式
      showSort: false,
      valueSort: "请选择排序方式", //排序方式
      arrSort: [], //存放排序方式
      rectangle: "", //自己所在位置的经纬度
      //结束
    };
  },
  created() {
    this.getLocationInfo();
  },
  methods: {
    // 获取用户位置信息
    async getLocationInfo() {
      const params = {
        key: this.key,
      };
      const { data } = await axios.get("https://restapi.amap.com/v3/ip", {
        params,
      });
      // data.adcode值为获取天气需要的city值
      let aaa = data.rectangle.split(";");
      this.rectangle = aaa[0];
      // alert(JSON.stringify(this.rectangle));
      this.selectStore();
    },
    //查询店铺信息
    selectStore() {
      var _this = this;
      this.$http
        .get("/tbStore/selectStoreByStoreId?provice=" + this.proaa + "&city=" + this.city+"&storeName=" + this.name)
        .then(function (response) {
          console.log("用户绑定的门店信息。。。。。");
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.stores = response.data.data; //查询出来的门店信息
            //查询店铺标签信息
            // _this.selectStoreLabels();
            _this.mendian();
          }
        })
        .catch(function (error) {
          //alert(JSON.stringify(error));
          _this.$toast("你错了。。。");
        });
    },
    async mendian() {
      let num = -1;
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      for (var i = 0; i < this.stores.length; i++) {
        const params = {
          key: this.key,
          origins: this.rectangle,
          destination:
            this.stores[i].longitude + "," + this.stores[i].latitude,
        };
        const { data } = await axios.get(
          `https://restapi.amap.com/v3/distance`,
          { params }
        );
        this.stores[i].jvli = data.results[0].distance / 1000;
        var _this = this;
        this.$http
          .get(
            "/storeLabels/selectLabelByStoreId?storeId=" +
              this.stores[i].storeId
          )
          .then(function (response) {
            console.log("店铺标签信息。。。。。");
            console.log(JSON.stringify(response));
            if (response.data.code == 200) {
              num = num + 1;
              _this.stores[num].storeLabels = response.data.data; //查询出来的店铺标签
            }
          })
          .catch(function (error) {
            //alert(JSON.stringify(error));
            console(error);
            _this.$toast.error("你错了。。。");
          });
      }
    },
    //搜索方法
    search() {
      this.name = this.value;
      this.selectStore();
    },

    //  方法事件处理
    //刷新方法
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        //调用请求
      }, 1000);
    },
    jump(uri) {
      this.$router.push(uri);
    },
    jumpId(uri, id) {
      this.$router.push({ name: uri, query: { id: id } });
    },
    // 两个弹出框数据的方法 开始
    bindShow() {
      this.showArea = true;
    },
    bindCancel() {
      this.valueArea = "请选择地区";
      this.showArea = false;
      location.reload();
    },
    //地区选择
    onAreaConfirm(val) {
      this.showArea = false;
      this.arrArea = val;
      var addrInfo = val[0].name + "-" + val[1].name;
      this.valueArea = addrInfo;
      this.city = val[1].name;
      this.proaa = val[0].name;
      this.selectStore();
    },

    //排序方法
    bindSort() {
      this.showSort = true;
    },
    SortCancel() {
      this.showSort = false;
    },
    //排序选择
    onSortConfirm(val) {
      this.showSort = false;
      this.arrSort = val;
      var addrInfo = val[0].name;
      this.valueSort = addrInfo;
      if (addrInfo == "距离最近") {
        for (var i = 1; i < this.stores.length; i++) {
          for (var j = 0; j < this.stores.length - i; j++) {
            if (
              Number(this.stores[j].jvli) > Number(this.stores[j + 1].jvli)
            ) {
              let aaa = this.stores[j];
              this.stores[j] = this.stores[j + 1];
              this.stores[j + 1] = aaa;
            }
          }
        }
      } else if (addrInfo == "距离最近"){
       this.score();
      }
    },
    score() {
      for (var i = 1; i < this.stores.length; i++) {
        for (var j = 0; j < this.stores.length - i; j++) {
          if (
            Number(this.stores[j].country) <
            Number(this.stores[j + 1].country)
          ) {
            let aaa = this.stores[j];
            this.stores[j] = this.stores[j + 1];
            this.stores[j + 1] = aaa;
          }
        }
      }
    },
    //结束
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style scoped>
.t-column-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 轮播图样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 195px;
  border-radius: 10px;
}
.imgcolor {
  /* width: 100px; */
  height: 120px;
}
.imgfor {
  width: 100%;
  height: 100%;
}
.evaluate {
  text-align: left;
}
.storeName {
  font-size: 22px;
  font-weight: 600;
}
.interval {
  margin-top: 5px;
}
.distance {
  text-align: right;
  float: right;
  font-size: 16px;
  line-height: 20px;
  color: rgb(153, 153, 179);
}

.min1 {
  background-color: #39a9ed;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.min2 {
  background-color: #38ac83;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.min3 {
  background-color: #df7007bb;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.keyword {
  color: rgb(8, 164, 236);
  background-color: rgb(191, 231, 249);
  margin-bottom: 5px;
  margin-right: 5px;
  font-size: 16px;
}
.address > .van-cell__value--alone {
  font-size: 16px;
  color: rgb(153, 153, 179);
}
</style>
